/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    CCell, Cell, Input, InputDatalist, InputLine, LineColumn, Select, SuffixInput, Table, TableBody, TableRow, Text, TextArea, useTheme,
} from "customize-easy-ui-component";
import {CCellUnit, InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {config设备概况} from "./orcBase";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";

export const itemA下结论=['问题及处','安全评定','检验结论','结论压力','结论温度','结论介质','检验日期','新下检日','新下年检日','结论说明' ];
export const itemA下结论m=itemA下结论.concat(['工作压力','工作温度','工作介质']);
export const ConclusionAnnualW=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label}:InternalItemProps,  ref
    ) => {
        const defvcbFunc = React.useCallback((par: any) => {
            const {结论压力,结论温度,结论介质 }=par||{};
            if(!结论压力)   par.结论压力=par?.工作压力;
            if(!结论温度)   par.结论温度=par?.工作温度;
            if(!结论介质)   par.结论介质=par?.工作介质;
            return  par;
        }, []);
        const [getInpFilter]=useMeasureInpFilter(null,itemA下结论m,defvcbFunc);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">问题 及其处理：</Text>
            [检查发现的缺陷位置、性质、程度及处理意见（必要时附图或附页）]
            <TextArea value={inp?.问题及处 || ''} rows={8}
                      onChange={e => setInp({...inp, 问题及处: e.currentTarget.value || undefined})}/>
            <hr/>
            <Text variant="h5">检验结论-检查结论{'>>'}</Text>
            <InputLine  label='安全状况等级评定为' >
                <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                        value={ inp?.安全评定  ||''} onChange={e => setInp({ ...inp, 安全评定: e.currentTarget.value||undefined}) }>
                    <option></option>
                    <option>1级</option>
                    <option>2级</option>
                    <option>3级</option>
                    <option>4级</option>
                    <option>5级</option>
                </Select>
            </InputLine>
            <InputLine  label='检查结论' >
                <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                        value={ inp?.检验结论  ||''} onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }>
                    <option></option>
                    <option>符合要求</option>
                    <option>基本符合要求</option>
                    <option>不符合要求</option>
                </Select>
            </InputLine>
            允许（监控）使用参数：
            <LineColumn column={4}>
                <InputLine  label='压力' >
                    <SuffixInput  value={inp?.结论压力 ||''}
                                  onChange={e=>setInp({ ...inp, 结论压力: e.currentTarget.value||undefined})}>MPa</SuffixInput>
                </InputLine>
                <InputLine  label='温度' >
                    <SuffixInput  value={inp?.结论温度 ||''}
                                  onChange={e=>setInp({ ...inp, 结论温度: e.currentTarget.value||undefined})}>℃</SuffixInput>
                </InputLine>
                <InputLine  label='介质'>
                    <InputDatalist value={inp?.结论介质 ||''}
                                   onListChange={v => setInp({ ...inp, 结论介质: v||undefined})} />
                </InputLine>
                <InputLine label='设置检验日期'>
                    <Input value={inp?.检验日期 || ''} type='date'
                           onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
                </InputLine>
                <InputLine  label='下次年度检查日期' >
                    <Input  value={inp?.新下年检日 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 新下年检日: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='下次定期检验日期' >
                    <Input  value={inp?.新下检日 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
                </InputLine>
            </LineColumn>
            结论说明: （监控运行需要解决的问题及完成期限）
            <TextArea  value={inp?.结论说明 ||''} rows={10}
                       onChange={e => setInp({ ...inp, 结论说明: e.currentTarget.value||undefined}) } />
        </InspectRecordLayout>;
});

export const ConclusionVw= ({ orc, rep,op } : { orc: any, rep: any,op?:boolean}
) => {
    const theme = useTheme();
    //配置模型不一致的： Error: desc.view is not a function；
    const [renderUpper]=useThreeColumnView({orc, config:config设备概况,slash:true,});
    return <>
        <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
            <Text id={'Conclusion'} variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>压力容器年度检查{op?'记录':'报告'}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["14.1%",  "%","8.1%", "19%","8.1%","24%"] }
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Survey'}>
                    {renderUpper}
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["6.8%", "%", "24%","29%"] } css={{borderCollapse: 'collapse',}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Conclusion'}>
                    <TableRow>
                        <CCell>问题及其处理</CCell>
                        <Cell split={true} colSpan={3}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
                            {orc.问题及处 || '／'}
                        </div></Cell>
                    </TableRow>
                    <TableRow  css={{"@media print": {pageBreakInside: 'avoid',}}}>
                        <CCell rowSpan={3}>检查结论</CCell>
                        <CCell rowSpan={2}><Text variant="h4">{orc.检验结论}</Text></CCell>
                        <CCell colSpan={2}>允许（监控）使用参数</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell colSpan={2} css={{padding:0}}>
                            <Table  fixed={ ["18%","%"]  } css={ {borderCollapse: 'collapse', height:'fill-available'} } tight  miniw={800}>
                                <TableBody>
                                    <TableRow >
                                        <CCell>压力</CCell>
                                        <CCellUnit unit={'MPa'}>{orc.结论压力 || '／'}</CCellUnit>
                                    </TableRow>
                                    <TableRow >
                                        <CCell>温度</CCell>
                                        <CCellUnit unit={'℃'}>{orc.结论温度 || '／'}</CCellUnit>
                                    </TableRow>
                                    <TableRow >
                                        <CCell>介质</CCell>
                                        <CCell>{orc.结论介质}</CCell>
                                    </TableRow>
                                </TableBody>
                            </Table>
                        </CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>下次年度检验日期</CCell>
                        <CCell colSpan={2}>{orc?.新下年检日}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell  scope="row">说明</CCell>
                        <Cell split={true} colSpan={3}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
                            {orc.结论说明 || '／'}
                        </div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
    </>;
};
